<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="/template/template.xhtml">
        <ui:define name="conteudo">
            <p:panel header="Cadastro de Clientes">
                <h:form id="edicao">
                    <p:growl id="growl" />
                    <p:messages />
                    <p:panelGrid columns="2">
                        <p:outputLabel value="Nome: " />
                        <p:inputText value="#{clienteBean.clienteSelecionado.nome}" />
                        
                        <p:outputLabel value="CPF: " />
                        <p:inputText value="#{clienteBean.clienteSelecionado.cpf}">
                            <f:validator validatorId="cpf" />
                        </p:inputText>
                        
                        <p:outputLabel value="Endereço: " />
                        <p:inputText value="#{clienteBean.clienteSelecionado.endereco}" />
                        
                        <p:outputLabel value="Email: " />
                        <p:inputText value="#{clienteBean.clienteSelecionado.email}" />
                        
                        <p:outputLabel value="Renda: " />
                        <p:inputText value="#{clienteBean.clienteSelecionado.renda}">
                            <f:convertNumber minFractionDigits="2" />
                        </p:inputText>
                    </p:panelGrid>
                    <hr/>
                    <p:commandButton value="Salvar" action="#{clienteBean.salvar}" update="growl">
                        <f:ajax 
                            event="click"
                            execute="@form"
                            listener="#{clienteBean.salvar}"
                            render="lista"/>
                    </p:commandButton>
                </h:form>
            </p:panel>
            
            <br/>
            
            <p:panel header="Listagem de Clientes">
                <h:form id="lista">
                    <p:dataTable value="#{clienteBean.lista}" var="cliente">
                        <p:column>
                            <f:facet name="header">Nome</f:facet>
                            #{cliente.nome}
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">CPF</f:facet>
                            #{cliente.cpf}
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">Data Cadastro</f:facet>
                            <h:outputText value="#{cliente.dataCadastro}">
                                <f:convertDateTime dateStyle="medium" />
                            </h:outputText>
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">Endereço</f:facet>
                            #{cliente.endereco}
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">Email</f:facet>
                            #{cliente.email}
                        </p:column>
                        <p:column>
                            <f:facet name="header">Renda</f:facet>
                            <h:outputText value="#{cliente.renda}">
                                <f:convertNumber currencyCode="BRL" type="currency" currencySymbol="R$" />
                            </h:outputText>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:panel>
        </ui:define>
    </ui:composition>
</html>

